import React, { useState } from "react";
// 登录和注册共用的页面
import "./login.less";
// 脚手架的图片加载方式，跟我们之前写html+css的结构不一样，需要先把图片当成是模块导入
import logo from "@/assets/images/logo.png";
// 导入mui的输入框
import { TextField, Divider, Button } from "@mui/material";
// 导入API
import { LoginApi, RegisterApi } from "@/api";
import { useNavigate } from "react-router-dom";
import { useToast } from "@/util/util";
export default function Login() {
  // 定义一个数据，这个数据是表示当前是用来做登录还是用来做注册
  const [isLoginPage, setIsLoginPage] = useState(true); // 如果是true，表示当前是登录，如果是false。表示当前是注册
  // 3. 准备两个数据，手机号和密码
  const [username, setUsername] = useState("12345678901");
  const [password, setPassword] = useState("wolfcode123");
  const navigate = useNavigate();
  // 利用一个自定义hook，得到一个函数，这个函数里面可以操作toast
  const toast = useToast();

  // 把注册和登录的逻辑分开
  const register = () => {
    RegisterApi({
      phone: username,
      password,
    }).then((res) => {
      // 如果成功
      if (res.errCode === 0) {
        alert(res.message);
      }
    });
  };
  const login = () => {
    LoginApi({ username, password }).then((res) => {
      if (res.errCode === 0) {
        toast("登录成功", "success");
        // 拿到了登录成功后的token ，先把token存起来
        sessionStorage.setItem("token", res.data); // 如果用户把页面关闭了，希望用户重新登录
        // 跳转 /home
        navigate("/home");
      }
    });
  };

  // 2. 写一个按钮点击事件的函数;
  const buttonClick = () => {
    // 先对表单进行一定的验证
    // 如果用户名和密码为空，无法注册
    if (username.trim().length === 0) {
      toast("手机号不能为空", "error");
      return;
    }
    if (password.trim().length === 0) {
      toast("密码不能为空", "error");
      return;
    }
    // 如果手机号不满足条件
    if (!/^[1]\d{10}$/.test(username)) {
      toast("手机号格式不正确", "error");
      return;
    }
    // 先判断，当前是注册还登录
    isLoginPage ? login() : register();
  };

  // 实现登录和注册：
  // 1. 搭建静态结构 html+css
  return (
    <div className="login">
      <section className="logo">
        <img src={logo} alt="" />
      </section>
      <section className="form">
        <Divider />
        {/* 4. 把输入框变成受控组件 */}
        <TextField
          id="outlined-basic"
          placeholder="请里输入手机号"
          variant="outlined"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
        <Divider />
        <TextField
          id="outlined-basic"
          placeholder="请输入密码"
          variant="outlined"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <Divider />
        <Button variant="contained" onClick={buttonClick}>
          {isLoginPage ? "登录" : "注册"}
        </Button>
        <Divider />
        <span className="change" onClick={() => setIsLoginPage(!isLoginPage)}>
          去{isLoginPage ? "注册" : "登录"}
        </span>
      </section>
    </div>
  );
}
